<br>
<div class="panel panel-default shadowed">
    <div class="panel-heading clearfix">
        <h2 class="panel-title pull-left">Order Information</h2>
    </div>
    <div class="panel-body">
        <form role="form">
            <div class="row">
                <div class="form-group col-md-3">
                    <label for="customer-name">Customer Name</label>
                    <select class="form-control" ng-model="oc.order.customer_id" id="customer-name" ng-options="customer.id as customer.name for customer in oc.customers" ng-disabled="!oc.isSalesman()">
                        <option style="display:none" value="">Select a Customer</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label for="status">Status</label>
                    <input type="text" ng-model="oc.orderStatus" id="status" class="form-control" ng-disabled="true">
                </div>
            </div>
        </form>
    </div>
</div>

<div class="panel panel-default shadowed">
    <div class="panel-heading clearfix">
        <h2 class="panel-title pull-left">Lines in Order</h2>
        <div class="pull-right" ng-show="oc.isSalesman()">
            <button type="button" class="btn btn-primary" ng-click="oc.addLine()"><span class="fa fa-plus"></span> Line</button>
        </div>
    </div>
    <div class="panel-body">
        <form role="form" ng-repeat="line in oc.order.lines_in_order">
            <div class="row" style="background-color: #f4f4f4;">
                <div class="col-md-10">
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label for="product-name">Product Name</label>
                            <select class="form-control" ng-model="line.product_id" id="product-name" ng-options="product.id as product.name for product in oc.products" ng-disabled="!oc.isSalesman()">
                                <option style="display:none" value="">Select a Product</option>
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label for="quantity">Quantity</label>
                            <input type="text" ng-model="line.quantity" id="quantity" class="form-control" ng-disabled="!oc.isSalesman()">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="price">Price per unit</label>
                            <input type="text" ng-model="line.price" id="price" class="form-control" ng-disabled="!oc.isSalesman()">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-3">
                            <label for="line-status">Status</label>
                            <input type="text" ng-model="line.line_status" id="line-status" class="form-control" ng-disabled="true">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="estimated-date">Estimated Delivery Date</label>
                            <input type="text" ng-model="line.estimated_delivery_date" id="estimated-date" class="form-control" ng-disabled="!oc.isSalesman()">
                        </div>
                        <div class="form-group col-md-3">
                            <label for="comments">Comments</label>
                            <input type="text" ng-model="line.comments" id="comments" class="form-control" ng-disabled="!oc.isSalesman()">
                        </div>
                    </div>
                </div>
                <div class="col-md-2" ng-show="!$first" style="text-align: center;" ng-show="oc.isSalesman()">
                    <button type="button" style="margin-top: 25px" class="btn btn-danger" ng-click="oc.removeLine($index)"><span class="fa fa-minus"></span></button>
                </div>
            </div>
            <br>
        </form>
    </div>
</div>

<div class="panel panel-default shadowed">
    <div class="panel-heading clearfix">
        <h2 class="panel-title pull-left">Order Summary</h2>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-6">
                Order costs: {{oc.getCost()}}$
            </div>
        </div>
    </div>
    <div class="panel-footer clearfix">
        <button class="btn btn-danger pull-right" ng-click="oc.deleteOrder()" ng-show="oc.isEdit() && oc.isSalesman()"><span class="fa fa-trash"></span> Delete Order</button>
        <button class="btn btn-success pull-right" ng-click="oc.addOrder()" ng-show="!oc.isEdit()"><span class="fa fa-check"></span> Create Order</button>
        <button class="btn btn-success pull-right" ng-click="oc.updateOrder()" ng-show="oc.isEdit()  && oc.isSalesman()"><span class="fa fa-check"></span> Update Order</button>
        <button class="btn btn-warning pull-right" ng-click="oc.cancel()"><span class="fa fa-close"></span> Back</button>
    </div>
</div>